<template>
	<view class="pagess">
		<view class="back flex_c">
			<image src="../../static/icon/left_jt.png" mode="aspectFill" @click="goBack"></image>
			<!-- <text>签到送贡献</text> -->
		</view>
		<view class="poster">
			<image class="poster_img1" src="../../static/image/sign1.png" mode="aspectFill"></image>
		</view>
		<view class="activity_scroll flex_Z">
			<view class="task mart flex_Z">
				<image class="task_img1" src="../../static/image/sign3.png" mode="aspectFill"></image>
				<view class="seat"></view>
				<view class="task_box flex_ld" v-for="(item,index) in taskList" :key="index">
					<text>{{item.name}}</text>
					<view class="task_state flex_dq" v-if="contributionInfo.member_status == 1">
						<text class="state1" v-if="item.status == -1">未参与</text>
						<text  class="state1" v-if="item.status == 0">未开始</text>
						<text  class="state2" v-if="item.status == 1">进行中</text>
						<text  class="state1" v-if="item.status == 3">未完成</text>
						<image v-if="item.status == 2" src="../../static/icon/i_sign.png" mode="aspectFill"></image>
					</view>
					<view class="task_state flex_dq" v-else>
						<text class="state1" >未参与</text>
					</view>
				</view>
			</view>

			<view class="task mart2 flex_Z">
				<image class="task_img1" src="../../static/image/sign4.png" mode="aspectFill"></image>
				<view class="seat"></view>
				<view class="reward flex_ZC">
					<image :src="propInfo.prop_image" mode="aspectFill"></image>
					<text class="reward_text1">{{propInfo.prop_name}}x{{contributionInfo.reward_number}}</text>
					<text class="reward_text2">(市井参考价{{propInfo.price}}) </text>
				</view>
			</view>
		</view>
		
		<view class="reward_box reward_btn1 flex_c" v-if="contributionInfo.member_status < 0" @click="keyboardShow = true">
			<text  >开启任务</text>
			<text v-if="contributionInfo.whether_in == 0">（首次免费）</text>
			<text v-else>（支付{{contributionInfo.ful_price}}ful）</text>
		</view>
		<view class="reward_box reward_btn2 flex_c" v-else-if="contributionInfo.member_status == 2">
			<text >已完成</text>
		</view>
		<view class="reward_box reward_btn1 flex_c" v-else>
			<text >进行中</text>
		</view>
		
		<view class="tips flex_Z">
			<!-- <text class="tips_tit">参与条件:</text> -->
			<rich-text class="tishi" :nodes="nodeCentent"></rich-text>
		</view>
<!-- 		<view class="tips flex_Z">
			<text class="tips_tit">注意事项:</text>
			<rich-text class="tishi" nodes="1.每个用户最多只能完成一次任务领取一次奖励:
 2.开启任务免费:
 3.开启任务后，什么时候购买孵化藏品，那么购买孵化藏品的当天就算首日统计，连续统计七天，期间中断则视为任务失败; 
4.以当天所有有效品牌孵化订单(含品牌首发及市井孵化坊订单)中的藏品数量作为统计依据: 
5.任务失败后，次日可重新免费开启。"></rich-text>
		</view> -->
		
		
<!-- 		<u-popup :show="boxShow1" mode="center" @close="boxShow1 = false" closeable bgColor="transparent">
			<view class="prompt flex_ZC">
				<text class="f32 c3">提示</text>
				<view class="prompt_tit flex_dq">
					<text class="f26 c6">是否开启任务？</text>
				</view>
				<view class="btn_xz flex_ld_b">
					<text @click="boxShow1 = false">取消</text>
					<text @click="isConfrim">确认</text>
				</view>
			</view>
		</u-popup> -->
		<view class="empty2"></view>
		<u-popup :show="keyboardShow" mode="center" @close="keyboardShow=false" closeable bgColor="transparent">
			<view class="pass_wrap">
				<view class="tit">
					请输入交易密码
				</view>
				<u-code-input disabledDot :adjustPosition="false" borderColor="#555275" focus class="code_input"
					v-model="securityPwd" mode="line" dot></u-code-input>
				<view class="other_btnwrap">
					<view class="other_btn1" @click="keyboardShow=false,securityPwd=''">
						取消
					</view>
					<view class="other_btn2" @click="valChange()">
						确认
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {
		sevenDayDetail,sevenDayEnter
	} from '../../api/guessing.js'
	export default {
		data() {
			return {
				ids: '',
				nodeCentent:'',
				securityPwd: '', //安全密码
				boxShow1:false,
				keyboardShow: false, //密码框
				levelsList: {},
				contributionInfo:{},
				propInfo:{},
				taskList: [],
			}
		},
		onLoad(e) {
			console.log(e);
			this.ids = e.id
			this.initDetails()
		},
		methods: {
			onChange(e) {
				// console.log(e);
				this.timeData = e
			},
			// 详情
			initDetails() {
				sevenDayDetail({
					id: this.ids
				}).then(res => {
					console.log(res);
					if (res.code == 1) {
						this.contributionInfo = res.data
						this.propInfo = res.data.prop
						this.taskList = res.data.colourful_activity_demand
						this.nodeCentent = this.contributionInfo.introduction.replace(/\r\n/g, "<p/>") || '';
					}
				})
			},
			// 输入密码
			valChange() {
				if (this.securityPwd.length < 6) {
					uni.$u.toast("交易密码为6位")
				}
				if (this.securityPwd.length >= 6) {
					this.keyboardShow = false
					this.submitOrder()
				}
			},
			// 支付
			submitOrder() {
				let data = {
					id:this.ids,
					password:this.securityPwd
				}
				sevenDayEnter(data).then(res => {
					console.log(res);
					if (res.code == 1) {
						uni.$u.toast(res.msg);
						this.initDetails()
					}
					this.securityPwd = ''
				})
			},
			goBack() {
				//获取页面栈的长度
				const canNavBack = getCurrentPages()
				console.log(canNavBack.length);
				// 判断是否刷新了浏览器，刷新了浏览器，页面栈只有当前一个
				if (canNavBack.length > 1) {
					uni.navigateBack({
						delta: 1
					})
				} else {
					uni.switchTab({
						url: '/pages/index/index'
					})
				}
			},
		},
	}
</script>

<style scoped lang="scss">
	page {
		background: #f2ead5;
	}

	@font-face {
		font-family: 'iconfont';
		src: url("~@/iconfont/almm.ttf");
	}

	.back {
		position: fixed;
		top: 30rpx;
		/* #ifdef APP */
		top: 60rpx;
		/* #endif */
		left: 20rpx;
		width: 100%;
		height: 88rpx;
		z-index: 999;
	}

	.back>text {
		font-size: 28rpx;
		/* #ifdef APP */
		font-size: 36rpx;
		/* #endif */
		color: #ffffff;
	}

	.back>image {
		position: absolute;
		top: 50%;
		left: 0;
		transform: translateY(-50%);
		width: 60rpx;
		height: 60rpx;
	}

	.poster {
		position: relative;
		width: 100%;
	}

	.poster_img1 {
		width: 100%;
		height: 446rpx;
		margin-top: 80rpx;
	}

	.poster_img2 {
		width: 100%;
		height: 1200rpx;
	}

	.activity_scroll {
		position: relative;
		width: 100%;
		min-height: 900rpx;
		background: url('../../static/image/sign2.png');
		background-size: 100% 100%;
		padding-bottom: 80rpx;
	}

	.task {
		position: relative;
		width: 592rpx;
		background: linear-gradient(180deg, #F6EBD6 0%, #EADFC9 100%);
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		margin: 0 auto;
		padding: 20rpx 20rpx;
	}

	.mart {
		margin-top: 100rpx;
	}

	.mart2 {
		margin-top: 50rpx;
	}

	.task_img1 {
		position: absolute;
		top: -24rpx;
		left: 50%;
		transform: translateX(-50%);
		width: 292rpx;
		height: 48rpx;
	}

	.task_state {
		// background: pink;
	}

	.task_state>image {
		width: 38rpx;
		height: 34rpx;
	}
	.state1{
		background: #ae947a;
		color: #d6cabd;
		padding: 4rpx 20rpx;
		border-radius: 40rpx;
	}
	.state2{
		background: #6E4628;
		color: #ffffff;
		padding: 4rpx 20rpx;
		border-radius: 40rpx;
	}
	.seat {
		width: 100%;
		height: 10rpx;
	}

	.task_box {
		font-size: 28rpx;
		color: #6F401F;
		margin-top: 38rpx;
	}

	.reward {
		width: 592rpx;
		height: 330rpx;
		margin: 0 auto;
		justify-content: space-evenly;
	}

	.reward>image {
		width: 140rpx;
		height: 140rpx;
		border-radius: 16rpx;
	}

	.reward_text1 {
		font-size: 30rpx;
		color: #6F401F;
	}

	.reward_text2 {
		font-size: 28rpx;
		color: #6F401F;
	}
	.reward_box{
		width: 692rpx;
		height: 80rpx;
		text-align: center;
		border-radius: 24rpx;
		margin: 20rpx auto;
	}

	.reward_btn1 {
		background: #744A2C;
		font-size: 36rpx;
		color: #EFE7D1;
	}

	.reward_btn2 {
		background: #B39A80;
		font-size: 36rpx;
		color: #EFE7D1;
	}

	.tips {
		width: 690rpx;
		margin: 0 auto;
	}

	.tips_tit {
		font-size: 32rpx;
		font-weight: 700;
		color: #6F401F;
		margin: 10rpx 0;
	}
	.tishi{
		color: #896244;
	}
	
	.prompt {
		width: 600rpx;
		background: #E0DDDA;
		margin: 0 auto;
		border-radius: 20rpx;
		padding-bottom: 50rpx;
	}
	
	.prompt>text {
		width: 66%;
		margin-top: 70rpx;
		text-align: center;
		line-height: 50rpx;
	}
	
	.prompt_tit {
		margin: 10rpx 30rpx;
		font-size: 32rpx;
		color: #666666;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		overflow: hidden;
	}
	

	.btn_xz {
		width: 100%;
		margin-top: 30rpx;
	}
	
	.btn_xz>text:nth-child(1) {
		width: 220rpx;
		height: 72rpx;
		line-height: 72rpx;
		text-align: center;
		color: #A68A64;
		border: 1rpx solid #A68A64;
		border-radius: 280rpx;
	}
	
	.btn_xz>text:nth-child(2) {
		width: 220rpx;
		height: 72rpx;
		line-height: 72rpx;
		text-align: center;
		background: #A68A64;
		font-size: 28rpx;
		color: #ffffff;
		border-radius: 280rpx;
	}
	
	.pass_wrap {
		width: 602rpx;
		height: 406rpx;
		background: #E0DDDA;
		border-radius: 22rpx 22rpx 22rpx 22rpx;
		z-index: 998;
	
		.tit {
			width: 602rpx;
			text-align: center;
			font-size: 36rpx;
			color: #262626;
			padding-top: 50rpx;
			margin-bottom: 70rpx;
		}
	
		.code_input {
			margin: 0 auto;
		}
	
		.other_btnwrap {
			width: 522rpx;
			height: 72rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin: 0 auto;
			margin-top: 50rpx;
	
			.other_btn1 {
				width: 220rpx;
				height: 72rpx;
				border-radius: 280rpx 280rpx 280rpx 280rpx;
				border: 2rpx solid #A68A64;
				font-size: 28rpx;
				color: #A68A64;
				text-align: center;
				line-height: 72rpx;
			}
	
			.other_btn2 {
				width: 220rpx;
				height: 72rpx;
				background: linear-gradient(274deg, #AB8E68, #D7BA93);
				border-radius: 40rpx;
				font-size: 28rpx;
				color: #FFFFFF;
				text-align: center;
				line-height: 72rpx;
			}
		}
	
		.u-code-input {
			display: flex;
			align-items: center;
			justify-content: center;
		}
	
		/deep/.u-code-input__item {
			width: 30px !important;
			height: 30px !important;
			margin-right: 14px !important;
		}
	
		/deep/.u-code-input__item>text {
			color: #fff !important;
		}
	}
	
	/deep/.u-code-input__item__line {
		background: #A68A64 !important;
	}
</style>